<!-- 柱状图 -->
<template>
  <div class="wrap">
    <el-card class="box-card" shadow='never' style="height:calc(50vh - 102px);border-radius:6px">
      <div slot="header" class="clearfix">
        <span class="title" style="font-size:16px;"> {{ title }}</span>
      </div>
      <div>
        <div class="content" style="height:calc(50vh - 102px)">
          <div ref="barchart" id="barchart" :style="{ height: height, width: width }"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: '显示日统计趋势'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: 'calc(50vh - 102px)'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        // this.setOptions(val)
        if (!val || val?.series?.length === 0) {
          const dom = document.getElementById('barchart');
          dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
          dom.removeAttribute('_echarts_instance_');
        } else {
          this.setOptions(val)
        }
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.barchart, 'macarons')
    // 监听窗口尺寸变化，自适应图表
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 销毁前移除监听器
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
    setOptions(chartData) {
      // 计算是否需要旋转
      const needRotate = chartData.xAxis.some(label => label.length > 6);
      this.myChart.setOption({
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            rotate: needRotate ? -8 : 0,
            align: 'center',
            margin: 20 // 默认是8，调节上下距离
          },
          data: chartData.xAxis
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: "item",
          backgroundColor: '#fff',
          textStyle: {
            color: '#000'
          }
        },
        series: [
          {
            data: chartData.series,
            type: 'bar',
            barWidth: 50,
            label: {
              show: true, // 显示标签
              position: 'top', // 标签位置
              color: '#188df0',
            },
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            }
          }
        ]
      })
      this.myChart.off('click');
      this.myChart.on('click', (params) => {
        this.$emit('barclick', params.Name, this.title)
      });
    }
  }
};
</script>
<style scoped>
.echarts_tip {
  position: absolute;
  border-radius: 5px;
  background: rgba(0, 0, 0, .5);
  padding: 10px 20px;
}

.wrap {
  height: calc(50vh - 40px);
  overflow: hidden;
  background: #fff;
  border-radius: 6px;
  padding: 10px 24px 14px;
  margin: 0 auto;
}

::v-deep .el-card {
  border: none;
}

.wrap .title {
  font-size: 16px;
}
</style>